<!-- tag::all[] -->
<!-- tag::head[] -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <title>Taco Cloud</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" th:href="@{/css/styles.css}"/>
</head>

<body>
<h1>Design your taco!</h1>
<img th:src="@{/images/index.jpg}"/>

<!-- tag::formTag[] -->
<form method="POST" th:object="${taco}" action="/design">
  <span class="validationError"
        th:if="${#fields.hasErrors('ingredients')}"
        th:errors="*{ingredients}">Ingredient Error</span>

  <!-- tag::all[] -->
  <div class="grid">

    <div class="ingredient-group" id="wraps">
      <!-- tag::designateWrap[] -->
      <h3>Designate your wrap:</h3>
      <div th:each="ingredient : ${wrap}">
        <input name="ingredients" type="checkbox" th:value="${ingredient.id + '/' + ingredient.name + '/WRAP' }"/>
        <span th:text="${ingredient.name}">INGREDIENT</span><br/>
      </div>
      <!-- end::designateWrap[] -->
    </div>

    <div class="ingredient-group" id="proteins">
      <h3>Pick your protein:</h3>
      <div th:each="ingredient : ${protein}">
        <input name="ingredients" type="checkbox" th:value="${ingredient.id + '/' + ingredient.name + '/PROTEIN'}"/>
        <span th:text="${ingredient.name}">INGREDIENT</span><br/>
      </div>
    </div>

    <div class="ingredient-group" id="cheeses">
      <h3>Choose your cheese:</h3>
      <div th:each="ingredient : ${cheese}">
        <input name="ingredients" type="checkbox" th:value="${ingredient.id + '/' + ingredient.name + '/CHEESE'}"/>
        <span th:text="${ingredient.name}">INGREDIENT</span><br/>
      </div>
    </div>

    <div class="ingredient-group" id="veggies">
      <h3>Determine your veggies:</h3>
      <div th:each="ingredient : ${veggies}">
        <input name="ingredients" type="checkbox" th:value="${ingredient.id + '/' + ingredient.name + '/VEGGIES'}"/>
        <span th:text="${ingredient.name}">INGREDIENT</span><br/>
      </div>
    </div>

    <div class="ingredient-group" id="sauces">
      <h3>Select your sauce:</h3>
      <div th:each="ingredient : ${sauce}">
        <input name="ingredients" type="checkbox" th:value="${ingredient.id + '/' + ingredient.name + '/SAUCE'}"/>
        <span th:text="${ingredient.name}">INGREDIENT</span><br/>
      </div>
    </div>
  </div>

  <div>
    <h3>Name your taco creation:</h3>
    <input type="text" th:field="*{name}"/>
    <span class="validationError"
          th:if="${#fields.hasErrors('name')}"
          th:errors="*{name}">Name Error</span>
    <br/>
    <button>Submit your taco</button>
  </div>
</form>

</body>
</html>

